<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><!-- InstanceBegin template="/Templates/RootTemplate.dwt" codeOutsideHTMLIsLocked="true" -->
<head>
<meta name="Author" content="Heng Yuan" />

<!-- InstanceBeginEditable name="description" -->
<meta name="Description" content="JSCookMenu JavaScript Menu Demo Tips" />
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="doctitle" -->
<title>JSCookMenu Demo/Tips</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="/~heng/css/general.css" type="text/css" />
<script type="text/javascript" src="/~heng/JSCookMenu/JSCookMenu.js"></script>
<link rel="stylesheet" href="/~heng/JSCookMenu/ThemePanel/theme.css" type="text/css" />
<script type="text/javascript" src="/~heng/JSCookMenu/ThemePanel/theme.js"></script>
<link rel="stylesheet" href="/~heng/JSCookMenu/ThemeMiniBlack/theme.css" type="text/css" />
<script type="text/javascript" src="/~heng/JSCookMenu/ThemeMiniBlack/theme.js"></script>
<script type="text/javascript" src="/~heng/minibar.js"></script>
<!-- panel.js is different for each sub directory -->
<script type="text/javascript" src="panel.js"></script>

<!-- InstanceBeginEditable name="head" -->

<link rel="stylesheet" type="text/css" href="/~heng/JSCookMenu/ThemeOffice/theme.css" />
<script type="text/javascript" src="/~heng/JSCookMenu/ThemeOffice/theme.js"></script>
<link rel="stylesheet" type="text/css" href="/~heng/JSCookMenu/ThemeIE/theme.css" />
<script type="text/javascript" src="/~heng/JSCookMenu/ThemeIE/theme.js"></script>

<style type="text/css"><!--
A.ShowCode
{
  color: white;
  font-weight: bold;
  background-color: gray;
  border: 1px solid black;
  cursor: default;
}
/* for animation */
.ThemeOfficeMainItem .seq1,
.ThemeOfficeMainItemHover .seq2,
.ThemeOfficeMainItemActive .seq2
{
  display: inline;
}
.ThemeOfficeMainItem .seq2,
.ThemeOfficeMainItemHover .seq1,
.ThemeOfficeMainItemActive .seq1
{
  display: none;
}

tr.Palette
{
  height: 15px
}

td.Palette
{
  width: 15px;
  border: 2px solid white;
  padding: 0;
}

td.PaletteHover
{
  width: 15px;
  border: 2px solid blue;
  padding: 0;
}
--></style>

<!-- InstanceEndEditable -->

<style type="text/css"><!--
td.LeftPane .ThemePanelMenu,
td.LeftPane .ThemePanelMainItem,
td.LeftPane .ThemePanelMenuItem
{
	background: transparent;
}
td.LeftPane .ThemePanelSubMenuTable
{
	background: url(/~heng/images/qiou.gif);
}
td.LeftPane .ThemePanelMainItemHover,
td.LeftPane .ThemePanelMainItemActive,
td.LeftPane .ThemePanelMenuItemHover,
td.LeftPane .ThemePanelMenuItemActive
{
	background: url(/~heng/images/lu.gif);
}
--></style>
</head>
<body>
<div class="Header" style='background: url(/~heng/images/lu.gif);'>
<a id="top" name="top"></a>
<div align="right" id="MiniBar"></div>
<div style="font-size: 24pt; padding-top: 15px" align="center">
<!-- InstanceBeginEditable name="Document Head" -->
JSCookMenu Demo/Tips
<!-- InstanceEndEditable --></div>
</div>
<table summary="two column layout" class="Content">
<tr valign="top">
<td class="LeftPane" style="background: url(/~heng/images/qiou.gif)">
<div id="Panel"></div>

<script type="text/javascript"><!--
cmDraw ('MiniBar', minibar, 'hbl', cmThemeMiniBlack, 'ThemeMiniBlack');
cmDraw ('Panel', panel, 'vbr', cmThemePanel, 'ThemePanel');
--></script>
<hr />

<p>&nbsp;</p>
<p>&nbsp;</p>

<div align="center"><img alt="heng' html" src="/~heng/images/hengstamp.gif" /></div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div align="center">
<!-- BEGIN FASTCOUNTER CODE -->
<a href="http://fastcounter.bcentral.com/fc-join"><!-- InstanceBeginEditable name="counter" --><img alt="counter" border="0" src="http://fastcounter.bcentral.com/fastcounter?3107248+6214503" /><!-- InstanceEndEditable --></a>
<!-- END FASTCOUNTER CODE -->
</div>
</td>

<!-- InstanceBeginEditable name="content" -->
<td id="rightPane" width="100%">
<h3>Overview</h3>
<ul>
	<li><a href="#orients">Different Menu Orientations</a>
	</li>
	<li><a href="#themes">Different Themes in One Page</a>
	</li>
	<li><a href="#images">Applying Background Images</a>
	</li>
	<li><a href="#anim">Animation</a>
	</li>
	<li><a href="#actions">Custom Actions</a>
	</li>
	<li><a href="#noclick">Custom Actions without Closing Menu Automatically</a>
	</li>
	<li><a href="#clickopen">Click to Open Submenus</a>
	</li>
	<li><a href="#htmlmenu">Build Menu Using HTML</a>
	</li>
	<li><a href="#javascript">JavaScript Function Link</a>
	</li>
</ul>
<hr />
<a name="orients" id="orients"></a>
<h3>Different Menu Orientations</h3>
Not all themes support all the orientations.  Please check each individual's documentation.
<ul>
<li>'hbr'<div id="demo1_1"></div>
	</li>
	<li>'hbl'<div id="demo1_2"></div>
	</li>
	<li>'hur'<div id="demo1_3"></div>
	</li>
	<li>'hul'<div id="demo1_4"></div>
	</li>
	<li>'vbr'<div id="demo1_5"></div>
	</li>
	<li>'vbl'<div id="demo1_6"></div>
	</li>
	<li>'vur'<div id="demo1_7"></div>
	</li>
	<li>'vul'<div id="demo1_8"></div>
	</li>
</ul>
<hr />
<a name="themes" id="themes"></a>
<h3>Different Themes</h3>
<p>Here is just a brief overview of themes available.</p>
<ul>
<li>Office XP<div id="demo2_1"></div>
	</li>
	<li>Internet Explorer<div id="demo2_2"></div>
	</li>
	<li>Panel (background color has been changed to images in this demo)<div id="demo2_3"></div>
	</li>
	<li>MiniBlack<div id="demo2_4"></div>
	</li>
</ul>
<script language="JavaScript" type="text/javascript"><!--
function toggleDisplay (obj)
{
  if (obj.style.display == 'block')
    obj.style.display = 'none';
  else
    obj.style.display = 'block';
  return false;
}
cmDraw ('demo1_1', minibar, 'hbr', cmThemeOffice, 'ThemeOffice');
cmDraw ('demo1_2', minibar, 'hbl', cmThemeOffice, 'ThemeOffice');
cmDraw ('demo1_3', minibar, 'hur', cmThemeOffice, 'ThemeOffice');
cmDraw ('demo1_4', minibar, 'hul', cmThemeOffice, 'ThemeOffice');
cmDraw ('demo1_5', minibar, 'vbr', cmThemeOffice, 'ThemeOffice');
cmDraw ('demo1_6', minibar, 'vbl', cmThemeOffice, 'ThemeOffice');
cmDraw ('demo1_7', minibar, 'vur', cmThemeOffice, 'ThemeOffice');
cmDraw ('demo1_8', minibar, 'vul', cmThemeOffice, 'ThemeOffice');

cmDraw ('demo2_1', minibar, 'hbr', cmThemeOffice, 'ThemeOffice');
cmDraw ('demo2_2', minibar, 'hbr', cmThemeIE, 'ThemeIE');
cmDraw ('demo2_3', minibar, 'vbr', cmThemePanel, 'ThemePanel');
cmDraw ('demo2_4', minibar, 'hbr', cmThemeMiniBlack, 'ThemeMiniBlack');
--></script>
<hr />
<a name="images" id="images"></a>
<h3>Applying Background Images</h3>
<p>Well, you are aleady looking at it.  The panel at left uses the <code>Panel</code>
theme and I changed the background of submenu and made main menu, main menu items and
sub menu items transparent.  One doesn't have to change the style sheet, since in CSS,
rules specified later can override previous settings.  So, this is a quick way of modifying
themes.</p>
<a class="ShowCode" onclick="toggleDisplay (this.nextSibling)">Toggle Code Display</a><textarea rows="15" cols="70" style='display: none; overflow: scroll;'>
&lt;STYLE&gt;&lt;!--
.ThemePanelMenu,.ThemePanelMainItem,.ThemePanelMenuItem
{
	background: transparent;
}
.ThemePanelSubMenu
{
	background: url(/~heng/images/qiou.gif);
}
.ThemePanelMainItemHover,.ThemePanelMainItemActive,
.ThemePanelMenuItemHover,.ThemePanelMenuItemActive
{
	background: url(/~heng/images/lu.gif);
}
--&gt;&lt;/STYLE&gt;
</textarea>
<hr />
<a name="anim" id="anim"></a>
<h3>Animation</h3>
<p>It is possible to do animation with JSCookMenu as well, as the following example showing:</p>
<div id="animation"></div>
<script language="JavaScript" type="text/javascript"><!--
var animMenu = [[null, '<span class="seq1">1</span><span class="seq2">2</span>', null, null, null]];
cmDraw ('animation', animMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
--></script>
<a class="ShowCode" onclick="toggleDisplay (this.nextSibling)">Toggle Code Display</a><textarea rows="15" cols="70" style='display: none; overflow: scroll;'>
&lt;DIV ID=animation&gt;&lt;/DIV&gt;
&lt;STYLE&gt;&lt;!--
.ThemeOfficeMainItem .seq1,
.ThemeOfficeMainItemHover .seq2,
.ThemeOfficeMainItemActive .seq2
{
  display: inline;
}
.ThemeOfficeMainItem .seq2,
.ThemeOfficeMainItemHover .seq1,
.ThemeOfficeMainItemActive .seq1
{
  display: none;
}
--&gt;&lt;/STYLE&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;&lt;!--
var animMenu = [[null, '&lt;SPAN CLASS=seq1&gt;1&lt;/SPAN&gt;&lt;SPAN CLASS=seq2&gt;2&lt;/SPAN&gt;', null, null, null]];
cmDraw ('animation', animMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
--&gt;&lt;/SCRIPT&gt;
</textarea>
<hr />
<a name="actions" id="actions"></a>
<h3>Custom Action inside Menu</h3>
<p>To create a custom menu item that doesn't use the default actions.  One would do the
following intead of the usual menu item node:</p>
<pre>[_cmNoAction, 'HTML code']</pre>
<p>In place of the <code><i>HTML code</i></code>, one needs to specify the complete TABLE cell/row
information.  There are three cases:</p>
<ol>
	<li>If it is used inside a horizontal main menu, the code is inside a table
		cell <code>&lt;TD&gt;</code>.
	</li>
	<li>If it is used inside a vertical main menu, it must contain <code>&lt;TD COLSPAN=3&gt;</code>
		or codes that handle 3 table cells.
	</li>
	<li>If it is used inside a submenu, it must contain <code>&lt;TD COLSPAN=3&gt;</code> or codes
		that handle 3 table cells.
	</li>
</ol>
<p>Here is one example, having a palette selector inside a sub menu.  The palette selector looks like:</p>
<table summary="" border="0" cellpadding="0" cellspacing="2" style="cursor: default">
  <tr class="Palette">
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#000000">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00007F">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#007F00">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#007F7F">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F0000">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F007F">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F7F00">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F7F7F">&nbsp;</td>
  </tr>
  <tr class="Palette">
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#CCCCCC">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#0000FF">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00FF00">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00FFFF">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FF0000">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FF00FF">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FFFF00">&nbsp;</td>
    <td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
</table>
<script language="JavaScript" type="text/javascript"><!--
function overPalette (obj)
{
  obj.className = "PaletteHover";
}
function outPalette (obj)
{
  obj.className = "Palette";
}
function clickPalette (obj)
{
  var rightPane = document.getElementById ('rightPane');
  rightPane.bgColor = obj.bgColor;
}
--></script>
<a class="ShowCode" onclick="toggleDisplay (this.nextSibling)">Toggle Code Display</a><textarea rows="15" cols="70" style='display: none; overflow: scroll;'>
&lt;STYLE&gt;&lt;!--
tr.Palette
{
  height: 15px
}

td.Palette
{
  width: 15px;
  border: 2px solid white;
  padding: 0;
}

td.PaletteHover
{
  width: 15px;
  border: 2px solid blue;
  padding: 0;
}
--&gt;&lt;/STYLE&gt;
&lt;table summary="" border="0" cellpadding="0" cellspacing="2" style="cursor: default"&gt;
  &lt;tr class="Palette"&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#000000"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00007F"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#007F00"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#007F7F"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F0000"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F007F"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F7F00"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F7F7F"&gt;&nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="Palette"&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#CCCCCC"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#0000FF"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00FF00"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00FFFF"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FF0000"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FF00FF"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FFFF00"&gt;&nbsp;&lt;/td&gt;
    &lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FFFFFF"&gt;&nbsp;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;&lt;!--
function overPalette (obj)
{
  obj.className = "PaletteHover";
}
function outPalette (obj)
{
  obj.className = "Palette";
}
function clickPalette (obj)
{
  var rightPane = document.getElementById ('rightPane');
  rightPane.bgColor = obj.bgColor;
}
--&gt;&lt;/SCRIPT&gt;
</textarea>
<p>Now put the table inside the menu:</p>
<div id="PaletteMenu"></div>
<script language="JavaScript" type="text/javascript"><!--
var paletteMenu =
[
	[null, 'File', null, null, null,
		[null, 'Open', null, null, null],
		[null, 'Save', null, null, null]
	],
	[null, 'Palette', null, null, null,
		[null, 'Options', null, null, null],
		_cmSplit,
		[_cmNoAction, '<td class="ThemeOfficeMenuItemLeft"><td colspan="2"><table summary="" border="0" cellpadding="0" cellspacing="2" style="cursor: default">' +
			'<tr class="Palette">' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#000000">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00007F">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#007F00">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#007F7F">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F0000">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F007F">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F7F00">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F7F7F">&nbsp;</td>' +
			'</tr>' +
			'<tr class="Palette">' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#CCCCCC">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#0000FF">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00FF00">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00FFFF">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FF0000">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FF00FF">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FFFF00">&nbsp;</td>' +
				'<td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FFFFFF">&nbsp;</td>' +
			'</tr>' +
			'</table></td>']
	]
];
cmDraw ('PaletteMenu', paletteMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
--></script>
<a class="ShowCode" onclick="toggleDisplay (this.nextSibling)">Toggle Code Display</a><textarea rows="15" cols="70" style='display: none; overflow: scroll;'>
&lt;DIV ID=PaletteMenu&gt;&lt;/DIV&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;&lt;!--
var paletteMenu =
[
	[null, 'File', null, null, null,
		[null, 'Open', null, null, null],
		[null, 'Save', null, null, null]
	],
	[null, 'Palette', null, null, null,
		[null, 'Options', null, null, null],
		_cmSplit,
		[_cmNoAction, '&lt;td class="ThemeOfficeMenuItemLeft"&gt;&lt;td colspan="2"&gt;&lt;table summary="" border="0" cellpadding="0" cellspacing="2" style="cursor: default"&gt;' +
			'&lt;tr class="Palette"&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#000000"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00007F"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#007F00"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#007F7F"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F0000"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F007F"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F7F00"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#7F7F7F"&gt;&nbsp;&lt;/td&gt;' +
			'&lt;/tr&gt;' +
			'&lt;tr class="Palette"&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#CCCCCC"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#0000FF"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00FF00"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#00FFFF"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FF0000"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FF00FF"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FFFF00"&gt;&nbsp;&lt;/td&gt;' +
				'&lt;td onmouseover="overPalette (this)" onmouseout="outPalette (this)" onclick="clickPalette (this)" class="Palette" bgcolor="#FFFFFF"&gt;&nbsp;&lt;/td&gt;' +
			'&lt;/tr&gt;' +
			'&lt;/table&gt;']
	]
];
cmDraw ('PaletteMenu', paletteMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
--&gt;&lt;/SCRIPT&gt;
</textarea>
<hr />
<a name="noclick" id="noclick"></a>
<h3>Custom Actions without Closing Menu Automatically</h3>
<p>The demo above has one limitation in that the menu mouse listener is automatically called to
	close the menu.  Sometimes, such effects may not be desired, for instance in search boxes.
	Below are two demos how <code>_cmNoClick</code> instead of <code>_cmNoAction</code> can be
	used.
</p>
<p>Here is a simple search box:
</p>
<script language="JavaScript" type="text/javascript"><!--
function googleSearch (obj)
{
	window.open ('http://www.google.com/search?hl=en&lr=&q=' + obj.value, '_self');
	return false;
}
--></script>
<div><form action="">
<input type="text" size="10" value="jscookmenu"/><input type="button" value="Google" onclick="googleSearch(this.previousSibling)"/>
</form></div>
<a class="ShowCode" onclick="toggleDisplay (this.nextSibling)">Toggle Code Display</a><textarea rows="15" cols="70" style='display: none; overflow: scroll;'>
&lt;script language="JavaScript" type="text/javascript">&lt;!--
function googleSearch (obj)
{
	window.open ('http://www.google.com/search?hl=en&amp;lr=&amp;q=' + obj.value, '_self');
	return false;
}
-->&lt;/script>
&lt;form action="">
&lt;input type="text" size="10" value="jscookmenu"/>&lt;input type="button" value="Google" onclick="googleSearch(this.previousSibling)"/>
&lt;/form>
</textarea>
<p>Now put this search box inside a menu.
</p>
<div id="SearchMenu_1"></div>
<script language="JavaScript" type="text/javascript"><!--
var searchMenu =
[
	[null, 'Search', null, null, null,
		[_cmNoClick, '<td class="ThemeOfficeMenuItemLeft"><img src="/~heng/JSCookMenu/ThemeOffice/spacer.gif"/></td><td colspan="2"><form action=""><input type="text" size="10" value="jscookmenu"/><input type="button" value="Google" onclick="googleSearch(this.previousSibling)"/></form></td>']
	]
];
cmDraw ('SearchMenu_1', searchMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
--></script>
<a class="ShowCode" onclick="toggleDisplay (this.nextSibling)">Toggle Code Display</a><textarea rows="15" cols="70" style='display: none; overflow: scroll;'>
&lt;div id="SearchMenu_1">&lt;/div>
&lt;script language="JavaScript" type="text/javascript">&lt;!--
var searchMenu =
[
	[null, 'Search', null, null, null,
		[_cmNoClick, '&lt;td class="ThemeOfficeMenuItemLeft">&lt;img src="/~heng/JSCookMenu/ThemeOffice/spacer.gif"/>&lt;/td>&lt;td colspan="2">&lt;form action="">&lt;input type="text" size="10" value="jscookmenu"/>&lt;input type="button" value="Google" onclick="googleSearch(this.previousSibling)"/>&lt;/form>&lt;/td>']
	]
];
cmDraw ('SearchMenu_1', searchMenu, 'hbr', cmThemeOffice, 'ThemeOffice');
-->&lt;/script>
</textarea>
<p>Usually the search result will change the content of this window, so it is not necessary to
	consider the closing of the menu.  If needed, you can call <code>"cmHideMenuTime ()"</code>
	to close the current menu as the following example illustrates.
</p>
<div id="SearchMenu_2"></div>
<script language="JavaScript" type="text/javascript"><!--
var searchMenu2 =
[
	[null, 'Search', null, null, null,
		[_cmNoClick, '<td class="ThemeOfficeMenuItemLeft"><img src="/~heng/JSCookMenu/ThemeOffice/spacer.gif"/></td><td colspan="2"><form action=""><input type="text" size="10" value="jscookmenu"/><input type="button" value="Google" onclick="cmHideMenuTime();"/></form></td>']
	]
];
cmDraw ('SearchMenu_2', searchMenu2, 'hbr', cmThemeOffice, 'ThemeOffice');
--></script>
<a class="ShowCode" onclick="toggleDisplay (this.nextSibling)">Toggle Code Display</a><textarea rows="15" cols="70" style='display: none; overflow: scroll;'>
&lt;div id="SearchMenu_2">&lt;/div>
&lt;script language="JavaScript" type="text/javascript">&lt;!--
var searchMenu2 =
[
	[null, 'Search', null, null, null,
		[_cmNoClick, '&lt;td class="ThemeOfficeMenuItemLeft">&lt;img src="/~heng/JSCookMenu/ThemeOffice/spacer.gif"/>&lt;/td>&lt;td colspan="2">&lt;form action="">&lt;input type="text" size="10" value="jscookmenu"/>&lt;input type="button" value="Google" onclick="cmHideMenuTime();"/>&lt;/form>&lt;/td>']
	]
];
cmDraw ('SearchMenu_2', searchMenu2, 'hbr', cmThemeOffice, 'ThemeOffice');
-->&lt;/script>
</textarea>

<hr />
<a name="clickopen" id="clickopen"></a>
<h3>Click to Open Submenus</h3>
<p>JSCookMenu 1.4 introduced a new feature that requires clicking to open sub menus, as per requests by many
	people.  Currently, there are several behaviors possible for opening sub menus.
</p>
<ul>
	<li>0: use default behavior specified in JSCookMenu.js</li>
	<li>1: hover open in all cases (default in JSCookMenu.js)</li>
	<li>2: click on main, hover on sub</li>
	<li>3: click open in all cases</li>
</ul>
<p>You can either directly modify JSCookMenu.js and instantly make all your existing old theme properties to behave
not like the default, or you can modify individual theme properties.
</p>
<div id="clickMenu"></div>

<script type="text/javascript"><!--
var clickMinibar =
[
	[null, 'Heng Yuan\'s home', '/~heng/', '_self', null],
	_cmSplit,
	[null, 'All Projects', null, '_self', 'List all projects',
		[null, 'YooLex', 'http://yoolex.sourceforge.net/', '_self', null],
		[null, 'YooParse', 'http://yooparse.sourceforge.net/', '_self', null],
		[null, 'CookMail', 'http://ag.arizona.edu/~heng/cookmail', '_self', null],
		[null, 'CookScript', '/~heng/cookscript/index.html', '_self', null],
		[null, 'CookSwing', 'http://cookxml.sourceforge.net/cookswing/', '_self', null],
		[null, 'JSCookTree', '/~heng/JSCookTree/index.html', '_self', null],
		[null, 'JSCookMenu', '/~heng/JSCookMenu/index.html', '_self', null],
		_cmSplit,
		[null, 'Threaded Mud Client', 'http://tmud.sourceforge.net/', '_self', null],
		[null, 'ChDay Chinese Web Counter', 'http://ag.arizona.edu/~heng/chinese/chinese_chday.html', 'content', null],
		[null, 'Bin2Obj', 'http://www.simtel.net/pub/pd/41525.html', '_self', null],
		[null, 'CXTerm', 'http://www.rpmfind.net//linux/RPM/contrib/libc6/i386/cxterm-5.1p1-2.i386.html', '_self', null]
	],
	_cmSplit,
	[null, 'Contact', 'http://ag.arizona.edu/~heng/email.html', '_self', null]
];
var tmpClickOpen = cmThemePanel.clickOpen;
cmThemePanel.clickOpen = 2;
cmDraw ('clickMenu', clickMinibar, 'vbr', cmThemePanel, 'ThemePanel');
cmThemePanel.clickOpen = tmpClickOpen;
--></script>

<hr />
<a name="htmlmenu" id="htmlmenu"></a>
<h3>Build Menu using HTML</h3>
<p>One complaint which I hear a lot from JSCookMenu users is that the JavaScript menus are not search bot friendly.
	Since version 1.4, JSCookMenu comes with a new menu drawing function <code>cmDrawMenuFromText</code>which takes
	an HTML node and turn it into a dynamic menu.
</p>
<p>Here is an html section which can be understood by search bots:
</p>
<div>
	<ul>
		<li><span></span><a href="/~heng/projects.html" target="_self">Heng Yuan's home</a>
		</li>
		<li></li>
		<li><span></span><a href="/~heng/projects.html" target="_self">All Projects</a>
			<ul>
				<li><span></span><a href="http://yoolex.sourceforge.net/" target="_self">YooLex</a>
				</li>
				<li><span></span><a href="http://yooparse.sourceforge.net/" target="_self">YooParse</a>
				</li>
				<li><span></span><a href="http://ag.arizona.edu/~heng/cookmail" target="_self">CookMail</a>
				</li>
				<li><span></span><a href="/~heng/cookscript/index.html" target="_self">CookScript</a>
				</li>
				<li><span></span><a href="http://cookxml.sourceforge.net/cookswing/" target="_self">CookSwing</a>
				</li>
				<li><span></span><a href="/~heng/JSCookTree/index.html" target="_self">JSCookTree</a>
				</li>
				<li><span></span><a href="/~heng/JSCookMenu/index.html" target="_self">JSCookMenu</a>
				</li>
				<li></li>
				<li><span></span><a href="http://tmud.sourceforge.net/" target="_self">Threaded Mud Client</a>
				</li>
				<li><span></span><a href="http://ag.arizona.edu/~heng/chinese/chinese_chday.html" target="_self">ChDay Chinese Web Counter</a>
				</li>
				<li><span></span><a href="http://www.simtel.net/pub/pd/41525.html" target="_self">Bin2Obj</a>
				</li>
				<li><span></span><a href="http://www.rpmfind.net//linux/RPM/contrib/libc6/i386/cxterm-5.1p1-2.i386.html" target="_self">CXTerm</a>
				</li>
			</ul>
		</li>
		<li></li>
		<li><span></span><a href="http://ag.arizona.edu/~heng/email" target="_self">Contact</a>
		</li>
	</ul>
</div>
<p>Note that &lt;span&gt; tag after &lt;li&gt; serves as individual icon part of menu.  Description
	is the <code>title</code> attribute of &lt;a&gt; tag.  &lt;li&gt;&lt;/li&gt; is a menu split.
	The rest should be fairly obvious.  Then call
</p>
<pre>
	cmDrawFromText ('testHtmlMenu', 'hbl', cmThemePanel, 'ThemePanel');
</pre>
<p>would generate the desired menu.
</p>
<div id="testHtmlMenu">
	<ul style="visibility: hidden">
		<li><span></span><a href="/~heng/projects.html" target="_self">Heng Yuan's home</a>
		</li>
		<li></li>
		<li><span></span><a href="/~heng/projects.html" target="_self">All Projects</a>
			<ul>
				<li><span></span><a href="http://yoolex.sourceforge.net/" target="_self">YooLex</a>
				</li>
				<li><span></span><a href="http://yooparse.sourceforge.net/" target="_self">YooParse</a>
				</li>
				<li><span></span><a href="http://ag.arizona.edu/~heng/cookmail" target="_self">CookMail</a>
				</li>
				<li><span></span><a href="/~heng/cookscript/index.html" target="_self">CookScript</a>
				</li>
				<li><span></span><a href="http://cookxml.sourceforge.net/cookswing/" target="_self">CookSwing</a>
				</li>
				<li><span></span><a href="/~heng/JSCookTree/index.html" target="_self">JSCookTree</a>
				</li>
				<li><span></span><a href="/~heng/JSCookMenu/index.html" target="_self">JSCookMenu</a>
				</li>
				<li></li>
				<li><span></span><a href="http://tmud.sourceforge.net/" target="_self">Threaded Mud Client</a>
				</li>
				<li><span></span><a href="http://ag.arizona.edu/~heng/chinese/chinese_chday.html" target="_self">ChDay Chinese Web Counter</a>
				</li>
				<li><span></span><a href="http://www.simtel.net/pub/pd/41525.html" target="_self">Bin2Obj</a>
				</li>
				<li><span></span><a href="http://www.rpmfind.net//linux/RPM/contrib/libc6/i386/cxterm-5.1p1-2.i386.html" target="_self">CXTerm</a>
				</li>
			</ul>
		</li>
		<li></li>
		<li><span></span><a href="http://ag.arizona.edu/~heng/email" target="_self">Contact</a>
		</li>
	</ul>
</div>
<script language="JavaScript" type="text/javascript"><!--
	// testHtmlMenu is the id of the div which contains the menu
	cmDrawFromText ('testHtmlMenu', 'vbl', cmThemePanel, 'ThemePanel');
--></script>
<p>Currently, custom actions are not supported in HTML->menu conversion.
</p>

<hr />
<a name="javascript" id="javascript"></a>
<h3>JavaScript Function Link</h3>
<p>This demo is added because I am pretty much sick of being asked if this is possible
	or someone who do not know much about JavaScript or JSCookMenu claiming it could not
	be done.
</p>
<p>The demo basically sets the windows status bar text.  If you are using browsers
	like FireFox, you may not be able to see this text since by default it prevents
	JavaScripts from manipulating status bar text.  The purpose is to prevent link
	spoofing.
</p>
<div id="funcMenu"></div>
<script language="JavaScript" type="text/javascript"><!--
function setStatusText()
{
	window.defaultStatus = 'It worked!';
	// make sure this function doesn't return anything
}

var funcMenu =
[
	[null, 'Begin', null, null, null,
		[null, 'Action', 'javascript:setStatusText()', null, 'A JavaScript Action']
	]
];
cmDraw ('funcMenu', funcMenu, 'vbr', cmThemePanel, 'ThemePanel');
--></script>
<a class="ShowCode" onclick="toggleDisplay (this.nextSibling)">Toggle Code Display</a><textarea rows="15" cols="70" style='display: none; overflow: scroll;'>
&lt;div id="funcMenu">&lt;/div>
&lt;script language="JavaScript" type="text/javascript">&lt;!--
function setStatusText()
{
	window.defaultStatus = 'It worked!';
	// make sure this function doesn't return anything
}

var funcMenu =
[
	[null, 'Begin', null, null, null,
		[null, 'Action', 'javascript:setStatusText()', null, 'A JavaScript Action']
	]
];
cmDraw ('funcMenu', funcMenu, 'vbr', cmThemePanel, 'ThemePanel');
-->&lt;/script>
</textarea>

<hr />
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<!-- InstanceEndEditable -->
</tr>
</table>
<div align="center">
<p>(c) Copyright 2002-2005 Heng Yuan. All rights reserved.</p>
<a title="XHTML 1.0 Validator" href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" style="border: 0" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</div>

</body>
<!-- InstanceEnd --></html>
